<template>
    <div>
        <div>
             <table class="table table-striped table-bordered table-hover">
               <thead>
                   <tr>
                       <th><input type="checkbox"></th>
                       <th>ID</th>
                       <th>图书名称</th>
                       <th>类型</th>
                       <th>作者</th>
                       <th>上架日期</th>
                        <th>状态</th>
                       <th>操作</th>
                   </tr>
               </thead>
               <tbody>
                   <tr v-for="(item,index) in bookList" :key="index">
                       <td><input type="checkbox"></td>
                       <td>{{item.id}}</td>
                       <td>{{item.bookName}}</td>
                       <td>{{item.author}}</td>
                       <td>{{item.bookType}}</td>
                        <td>{{item.upTime}}</td>
                         <td>{{item.bkStatus}}</td>
                       <td>
                           <button class="btn btn-primary">修改</button>
                           <button class="btn btn-default">查看</button>
                       </td>
                   </tr>
               </tbody>
            </table>
        </div>
        <div class="pages">
               <PaginationB></PaginationB>
        </div>
    </div>
</template>

<script>
import PaginationB from '../components/PaginationB.vue'
import {mapActions,mapState} from 'vuex'
    export default {
        components:{
             PaginationB
        },
        data(){
            return {

            }
        },
        computed:{
            ...mapState({
                bookList: state => state.book.bookList
            })
        },
        methods:{
            ...mapActions([
                'getBookList'
            ]),
            getBList(){
                this.getBookList()
            }
        },
        mounted(){
            this.getBList()
        }
    }
</script>

<style scoped>
.pages{
    float: right;
}
</style>